<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- <span ABC="ABC">123123</span> -->
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count</button></p>
        <hr>

        <!-- 子父通信 -->
        <!-- 父组件 -->
        <!-- 父组件给子组件传入动态属性 => 值依赖于父组件的某个属性 -->
        <!-- 父组件给子组件传入自定义事件 => 值(函数 => 也是一个特殊的对象(引用类型)) -->
        <comp-a :count="count"  @update:count="updateCountHandler"></comp-a>
    </div>
</body>

<template id="compA">
    <div>
        <p >{{count}}</p>
        <!-- 子组件直接修改父组件传入的数据 => 报错 -->
        <!-- <p ><button @click="count++">count++</button></p> -->

        <!-- 子组件调用自定义事件修改 -->
        <p ><button @click="count >1 && $emit('update:count',count-1)">count--</button></p>
        <p ><button @click="$emit('update:count',count+1)">count++</button></p>
    </div>
</template>
<script>
 
    

    // 组件封装过程需要注意:
    // 1. data是一个函数
    // 2. 单个根元素
    // 3. 单向数据流


    // 单向数据流:
    // 父子组件通信过程中,数据的传输默认是单向的, 子组件不能直接更改父组件传入的数据 => 否则会带来页面渲染问题

    // 如何让子组件修改父组件传入的数据?  => 间接改
    // 父组件(传)
    // 1. 父组件给子组件传入动态属性(值依赖于父组件的某个属性  data 计算属性)
    // 2. 父组件给子组件传入自定义事件 => 值(函数 => 也是一个特殊的对象(引用类型))

    // 子组件(收):
    // 1. 子组件接收到自定义事件之后,存储到当前实例 $listeners _events位置(查看自定义事件)
    
    // 子组件如何触发自定义事件?
    // 1. 对应事件名触发   this.$emit('xxx',实参)


    let compA = {
        props: {
            count:Number,
        },
        data() {
            return {
                
            }
        },
        template: "#compA",
        mounted() {
            console.log("组件实例",this);
        },
    }


    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
            count:1,
        },
        methods:{
            // 定义修改数据的方法
            updateCountHandler:function(v){
                this.count = v;
            }
        },
        components: {
            compA: compA,
        },
        updated() {
            console.log(1, this);
        },
    })

</script>

</html>